<style>
.map {
  height: 100%;
  overflow: hidden;
}
</style>

<div class="map" id="map"></div>

<script>
  const map = L.map('map', {
    center: [22.522476, 113.940856],
    zoom: 15,
    maxZoom: 18,
    minZoom: 3,
    fullscreenControl: false,
    zoomControl: true,
    scaleControl: false
  })

  const gdLayer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: '1234'
  });
  gdLayer.addTo(map)
  const ggLayer = L.tileLayer('https://gac-geo.googlecnapps.cn/maps/vt?lyrs=m&x={x}&y={y}&z={z}');

  const coordinates = [
    [22.524450, 113.935985],
    [22.522369, 113.936994],
    [22.522476, 113.940856],
    [22.518957, 113.944654]
  ];
  const polyline = L.polyline(coordinates, {
    color: "#3388ff", //线颜色
    opacity: 0.6 //线透明度
  });

  const baseLayers = {
    "高德": gdLayer,
    "谷歌": ggLayer
  };
  const overlays = {
    "轨迹": polyline,
  };
  L.control.layers(baseLayers, overlays).addTo(map);
</script>